<template>
    <div class="zhongchou1" >
<div class="cheads_warp" :class="{chou:(show)}">
            <div class="cheads">
            <div class="clogos" @click="logo">
                <p>众筹</p>
                <span>CROWD FUNDING</span>
            </div>
           <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1" @click="shouye">首页</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">项目总览</template>
                    <el-menu-item index="2-1">农业</el-menu-item>
                    <el-menu-item index="2-2">设计</el-menu-item>
                </el-submenu>
                <el-menu-item index="3" @click="xieyi">发起项目</el-menu-item>
                <el-menu-item index="4" @click="mycrowd">我的众筹</el-menu-item>

            </el-menu>

        </div>

</div>
        <div v-if="zhong" class="routs">
            <p class="gy">共有<span>{{counts}}</span>个众筹项目</p>
           <ul class="clearfix">
              <li v-for="(val,ind) in zongcrowd" :key="ind" class="zzz" @click="detail(val.c_id)">
                  <img :src="val.cs_img"/>
                  <div class="xx">
                      <p class="nn">{{val.c_name}}</p>
                  <p class="zs clearfix"><span class="cc">支持：{{val.c_choubei}}</span><span v-if="val.data>0" class="sy">剩余：{{val.data}}天</span></p>
                  <!-- <el-progress :text-inside="false" :stroke-width="18" :percentage="70" status="success"></el-progress> -->
                  <el-progress :percentage="val.bi" :color="val.color"  :stroke-width="12"></el-progress>
                  <div class="zy"><p :style="{backgroundColor:val.color}" class="zt">{{val.status}}</p></div>
                  <p class="yc">已筹：<span>￥{{val.c_arrive}}</span></p>
                  <p class="yc dc">达成：</p>
                  </div>

                  </li> 
           </ul>
        </div>
        <div :style="'margin-top:'+mtop+'px'" class="rout" v-if="!zhong">
            <router-view name="zhongchou"></router-view>
        </div>
    </div>
    
</template>

<script>
export default {
    inject:['reload'],
data () {
    return {
         activeIndex: '1',
         show:true,
         mtop:0,
         zhong:false,
         classity:"",
         counts:"",
         zongcrowd:""
    }
},
mounted () {
    this.mtop=0;
    this.show = false;
      window.addEventListener('scroll', this.handleScroll);  
},
methods: {
    xieyi()
    {
        this.$router.push("/xieyi")
    },
    handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        if(keyPath.length>=2)
        {
           this.zhong=true;
            if(keyPath[1]=="2-1")
            {
                 this.classity=2;
            }
            else{
                this.classity=1
            }
             this.$axios.post("http://127.0.0.1:8081/client/zongcrowd",{c_classify:this.classity}).then(res=>
             {
                 this.counts=res.data.val[0][0].counts;
                 this.zongcrowd=res.data.val[1];
                 console.log("crowd",this.zongcrowd.length);
                 for(let i=0;i<this.zongcrowd.length;i++)
           {
               console.log(this.zongcrowd[i])
            console.log(new Date().getTime(),new Date(this.zongcrowd[i].c_day).getTime(),new Date(this.zongcrowd[i].c_fhtime).getTime())
               if(new Date().getTime()<parseInt(this.zongcrowd[i].startday))
               {
                   this.zongcrowd[i].status="即将上线";
                   this.zongcrowd[i].color="#eee";
                   this.zongcrowd[i].bi=0;
                    this.zongcrowd[i].data=0;
                //    this.zongcrowd[i].bi= parseFloat((this.zongcrowd[i].c_arrive/this.zongcrowd[i].c_targetmoney*100).toFixed(2))
               }
               else if(new Date().getTime()<new Date(this.zongcrowd[i].c_day).getTime()&&new Date().getTime()>parseInt(this.zongcrowd[i].startday))
               {
                   this.zongcrowd[i].status="众筹中";
                   this.zongcrowd[i].color="#97c724";
                //    console.log((this.zongcrowd[i].c_arrive/this.zongcrowd[i].c_targetmoney*100))
                this.zongcrowd[i].bi= parseFloat((this.zongcrowd[i].c_arrive/this.zongcrowd[i].c_targetmoney*100).toFixed(2));
                let dat=new Date(this.zongcrowd[i].c_day).getTime();
                this.zongcrowd[i].data=Math.floor((dat-new Date().getTime())/(24*60*60*1000))
                // console.log("sssss",this.zongcrowd[i].data);

               }
               else{
                   if(this.zongcrowd[i].c_arrive>=this.zongcrowd[i].c_targetmoney)
                   {
                       this.zongcrowd[i].status="项目成功";
                       this.zongcrowd[i].color="#97c724";
                       this.zongcrowd[i].bi=100;
                        this.zongcrowd[i].data=0;

                   }
                   else{
                       this.zongcrowd[i].status="项目失败";
                        this.zongcrowd[i].color="red";
                          this.zongcrowd[i].bi= parseInt((this.zongcrowd[i].c_arrive/this.zongcrowd[i].c_targetmoney*100))
                   this.zongcrowd[i].data=0;
                  }  
               }
           }

             })
              
           
            // console.log(keyPath[1])
            

        }
        else{
            this.zhong=false
        }

      },
      shouye()
      {
         
          this.$router.push("/crowd");
      },
      logo()
      {
       
          this.$router.push("/")
      },
      mycrowd()
      {
        
          if(sessionStorage.getItem("userid"))
          {
              this.$router.push({
                path:"/mycrowd",
                query:{"userid":sessionStorage.getItem("userid")}
              })
          }
          else{
              this.$confirm('您还未登录, 是否进入登录界面?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
          }
           
      },
      detail(id)
      {
this.$router.push({path:"/crowddetailes",query:{c_id:id}});
this.reload();
      },
       handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 let offsetTop = document.querySelector(".cheads_warp").offsetTop;
//  console.log(offsetTop)
 if(scrollTop > offsetTop)
  {this.show = true;
  this.mtop=document.querySelector(".cheads_warp").offsetHeight;
//   console.log("rout",document.querySelector(".rout").offsetTop,scrollTop)
  }  
  else{
      this.show = false;
      this.mtop=0;
  } 
//   console.log(scrollTop)
}
}
}
</script>

<style>
.cheads{
    width: 1080px;
    border-bottom: 1px solid #eee;
    height: 80px;
    margin: 0 auto;
    
}
.chou{
    position: fixed;
    top:0;
}
.cheads_warp{
      border-bottom: 1px solid #eee;
    height: 80px;
     background: #ffffff;
     z-index: 1009;
     width: 100%
   
}
.cheads .clogos{
    float: left;
    color: #000;
    width: 200px;
    text-align: center;
    padding: 14px 0 0;
}
.cheads .clogos p{
line-height: 30px;
color: #F18D00;
font-size: 20px;
letter-spacing: 20px;
font-weight: bold
}
.cheads .clogos span{
    line-height: 30px;
font-weight: bold;
}
.cheads .el-menu-demo{
    float: left;
    height: 80px;
}
.cheads .el-menu-item,.cheads .el-menu--horizontal>.el-submenu.is-active .el-submenu__title,.cheads .el-submenu__title{
    line-height: 80px !important;
}
.cheads .el-submenu__title,.cheads .el--item,.cheads .el-submenu,.cheads .el-menu-item,.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    height: 80px !important;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: 2px solid #F18D00;
}
.el-menu--horizontal>.el-menu-item.is-active{
border-bottom: #F18D00 solid 2px;
}
.xx .el-progress__text{
    position:absolute;
    left:190px;
    top:28px;
    color: #000;
        font-size: 16px !important;
        /* font-weight: bold; */
}
.zzz{
    width: 255px;
    margin:10px 5px;
    float: left;
    cursor: pointer;
    /* border: 1px solid red; */
}
.zzz img{
    width: 255px;
    height: 160px;;
}
.xx{
    padding: 20px 10px;
    position: relative;
    cursor: pointer;
}
.nn{
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
}
.zs{
    line-height: 30px;
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    color: #999
}
.zs .cc{
float: left;
}
.zs .sy{
    float: right;
}
.zy{
    position: relative;
}
.zt{
    position: absolute;
    /* letter-spacing: 5px; */
    color: #fff;
    width: 50px;
    text-align: center;
    /* padding: 0 5px; */
    font-size: 12px;
    top:-16px;
    right: -6px;
    font-weight: bold;
    border-radius: 3px;
}
.xx .yc{
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}
.xx .yc span{
    color: #000;
    font-size: 16px;
}
.dc{
    position: absolute;
    right: 55px;
    top:88px;
}
.zzz:hover{
    box-shadow: 3px 3px 10px #888888;
}
.gy{
    line-height: 40px;
    margin-top: 20px;
}
.gy span{
    color:orange;
    margin:0 10px
}
.routs{
    width: 1080px;
    margin: 0 auto;
}
</style>
